import {defineStore} from "pinia";

// 定义并导出容器
// 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器
// 参数2：选项对象，在其中配置容器的state、getters、actions
// 返回值：一个函数，调用得到容器实例
export const userMainStore = defineStore('main', {
    /**
     * 类似于组件的data，用来存储全局状态
     * 1. 必须是函数，这样是为了在服务端渲染的时候，避免交叉请求导致的数据状态污染
     * 2. 必须是箭头函数，为了更好的TS类型推导
     */
    state: () => {
        return {
            count: 100,
            foo: 'bar',
            arr: [1, 2, 3]
        }
    },
    /**
     * 类似于组件的computed，用来封装计算属性，有缓存的功能
     */
    getters: {
        // 函数接受了一个可选参数：state 状态对象
        count10(state) {
            console.log("count10 被调用了")
            return state.count + 10
        },
        // 如果在getters中使用了this，需要手动指定返回值的类型
        count20():number {
            console.log("count20 被调用了")
            return this.count + 20
        }
    },
    /**
     * 类似于组件的methods，封装业务逻辑，修改state
     */
    actions: {
        // 注意，不能使用箭头函数定义action，因为箭头函数绑定外部this
        changeState(num: number) {
            this.count += num
            this.foo = 'Hello action'
            this.arr.push(4)

            // 也可以使用this.$patch({})
            // 或this.$patch(state => {})方式批量更新
        }
    }
})